19 首頁與開始遊戲按鈕

2021 iThome 鐵人賽

DAY 19

Modern Web

連線網頁卡牌遊戲(Elixir, Phoenix, Liveview)系列第 19 篇

13th鐵人賽

韋政

2021-10-03 14:11:54

604 瀏覽

分享至

先來做個首頁好了

首頁要有

logo
開始遊戲的按鈕

來把畫面上面的 logo 拿掉吧吧！
預設所有畫面都會被這層包起來
lib/card_web/templates/layout/root.html.heex

上面這個<section>就是他的 navbar ，好像也用不到 <header>我們似乎直接刪掉就好了呵

<body class="p-2">
  <%= @inner_content %>
</body>

首頁我們就直接用 page_live 好了
在 lib/card_web/live/page_live/index.ex 也就是我們做計數器的地方
把計數器刪掉 QQ

然後一樣把新的首頁寫在 render 的 ~H 裡面

<div class="flex flex-col h-screen items-center justify-center">
  <header class="text-blue-500 m-4">
    <a href="/" class="text-5xl font-serif">
      ? CardyTotala
    </a>
  </header>
  <nav>
    <button>
      <div class="bg-blue-300 w-24 h-8 rounded-xl transform -skew-x-12 -rotate-6 translate-y-7 translate-x-8"></div>
      <div class="transform text-xl">Start a game</div>
    </button>
  </nav>
</div>

看起來像這樣

再來就要讓按鈕可以建立新遊戲了

在建立遊戲之前，我們需要有一個地方儲存目前線上的房間，
還好我們有 ETS 可以用，
ETS 是什麼？簡單說就是類似 redis 的 cache
這邊有比較正確完整的說明
我們目前會用到的大概只是皮毛，我們要用它來 key value 暫存

在 lib/card/application.ex 裡面有一個 start 方法
這個方法在 phoenix server 啟動的時候會執行，
我們現在要取巧一下直接在這邊加上

:ets.new(:rooms, [:set, :public, :named_table])

變成這樣

def start(_type, _args) do
  children = [
    # Start the Telemetry supervisor
    CardWeb.Telemetry,
    # Start the PubSub system
    {Phoenix.PubSub, name: Card.PubSub},
    # Start the Endpoint (http/https)
    CardWeb.Endpoint
    # Start a worker by calling: Card.Worker.start_link(arg)
    # {Card.Worker, arg}
  ]

  # 建立一個 rooms table 給大家用
  :ets.new(:rooms, [:set, :public, :named_table])

  # See https://hexdocs.pm/elixir/Supervisor.html
  # for other strategies and supported options
  opts = [strategy: :one_for_one, name: Card.Supervisor]
  Supervisor.start_link(children, opts)
  end

放好重開伺服器後
我們應該可以在任何地方使用這個 rooms 儲存

# 存值
:ets.insert_new(:rooms, {"午餐", "肉羹麵線"})

# 取值
key = :ets.lookup(:rooms, "午餐")
# key = [{"午餐", "肉羹麵線"}]

建立遊戲按鈕按下去的時候
我們會生一個 room_id 給他，並幫他轉址到那個房間等他的對手

先在按鈕上面綁上

  <button phx-click="start_game">

在建立對應的 handle_event

  def handle_event("start_game", _params, socket) do
    room_id = random_room_id()
    :ets.insert_new(:rooms, {room_id, "房間資料"})

    # 這邊會讓玩家導向到這個網址
    {:noreply, push_redirect(socket, to: "/#{room_id}")}
  end

  # 這一行是很差的隨機數字做法，但是很短會產出像這樣的格式 => room_5084197354157148
  defp random_room_id(), do: "room_" <> String.trim(to_string(:rand.uniform), "0.")

現在按下去就爆了，因為根本沒有那一頁

我們下一篇來做等待 guest 加入的頁面與機制